import React from 'react';
import { HashRouter, Router, Route, Link } from 'react-router-dom';
import Top from '../top/index.js';
import Nav from '../nav/index.js';
import { Select,MessageBox } from 'element-react';
import axios from 'axios';
import echarts from 'echarts';
import bmap from 'echarts/extension/bmap/bmap'
import china from '../../assets/js/china'
import bengbu from '../../assets/js/bengbu.json'
import hangzhou from '../../assets/js/hangzhou.json'
import xian from '../../assets/js/xian.json'
import xianning from '../../assets/js/xianning.json'
import yinchuan from '../../assets/js/yinchuan.json'
//全国所有城市经纬度坐标
import geoCoordMap from '../../assets/js/geoCoordMap.js'
import './home.css';
import './car.svg';

class Home extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			checkedFlag: false, //是否显示航线图
		    options: [{label:'全部项目',value:0}], //分站选项
		    substationData:[], //所有分站数据
		    value:'', //当前选择的分站
		    packageNames:[], //所有分拣中心名称
		    packageData:[], //该城市服务亭、分拣中心名字及坐标数据
		    allCoordinate:[], //该分站下所有服务亭及分拣中心坐标数据
		    cityNames:[], //再生工厂名称
		    mainData:[], //分站到再生工厂名字及坐标数据
		    overallSituationList:[], //总体情况
		    everyMonthRecycleList:[], //月回收量
		    everyKindsReliveResourcesRecycleList:[], //各类再生资源回收量占比
		    todayRecycleDataList:[], //今日数据(单日回收量)
		    everyMonthTurnoverList:[], //每月营业额
		    packageStationCounts:'', //统计分拣中心数量
		    cashCount:'', //累计营业额
		    weightCount:'', //累计回收量
		    recycleTimesCount:'', //累计回收次数
		}
	}

	componentDidMount(){
		//获取分站城市数据
		this.getCityData();
		//获取分站数据
		this.getSubstationData();
	}

	//显示隐藏侧边导航
	handelClick(){
		document.querySelector('.nav').style.display = 'block';
	}

	//小地图返回大地图
	mapReturn(){
		document.querySelector('#map').style.display = 'block';
		document.querySelector('#smallMap').style.display = 'none';
		document.querySelector('#return').style.display = 'none';
	}

	//勾选是否显示航线图
	routerCheck(){
		let checkedFlag = this.state.checkedFlag;
		this.setState({
			checkedFlag: !checkedFlag
		})
		setTimeout(() => {
			if(this.state.checkedFlag){
				document.querySelector('#map').style.display = 'none';
				document.querySelector('#smallMap').style.display = 'none';
				document.querySelector('#return').style.display = 'none';
				document.querySelector('#routeMap').style.display = 'block';
				document.querySelector('#housePackageMap').style.display = 'none';
				//初始化城市销售轨迹航线图
				this.renderRouteMap();
			}else{
				document.querySelector('#map').style.display = 'block';
				document.querySelector('#return').style.display = 'none';
				document.querySelector('#smallMap').style.display = 'none';
				document.querySelector('#routeMap').style.display = 'none';
				document.querySelector('#housePackageMap').style.display = 'none';
			}
		}, 100)
	}

	//获取分站数据
	getSubstationData(){
		axios.get('/count/count/searchallsubstations').then((data) => {
			let res = data.data;
			if(res.code == 0){
				let temp;
				if(res.data && res.data.length > 1){
					temp = [{label:'全部项目',value:0}];
				}else{
					temp = [];
				}
				res.data.forEach((item,index) => {
					temp.push({value:item.id, label:item.name})
				})
				this.setState({
					options: temp
				})
				if(res.data && res.data.length >= 1){
					//获取各图表数据
					this.getEchartsData(temp[0].value);
				}else{
					//获取各图表数据
					this.getEchartsData(0);
				}
			}else if(res.code == -111){
				MessageBox.alert(res.msg);
			}else{
				//MessageBox.alert('请求失败，请重新登录!');
				this.props.history.push('/login')
			}
		})
	}

	//获取分站下城市数据
	getCityData(){
		axios.get('/count/count/citys').then((data) => {
			let res = data.data;
			if(res.code == 0){
				let substationData = [];
				res.data.forEach((item,index) => {
					substationData.push({
						name:item.name,
						value:200,
						//id:item.substationId,
						cityId:item.id
					})
				})
				this.setState({
					substationData: substationData
				})

				//获取城市销售轨迹航线数据
				this.getRouteMapData();
				//初始化地图
				this.renderMap();
			}else if(res.code == -111){
				MessageBox.alert(res.msg);
			}else{
				MessageBox.alert(res.msg);
			}
		}).catch((e) => {
			MessageBox.alert('请求失败，请检查网络!');
		})
	}

	//选择当前分站
	selectSubstation(e){
		this.setState({
			value: e
		})
		//加载当前分站下的各个数据图表
		this.getEchartsData(e)
	}

	//格式化数字
	formatNum(num){
		var arr = num.toString().split('');
		while(arr.length > 6){
			arr.pop();
		}
		var blank = 6 - arr.length;
		for(var i = 0;i < blank; i ++){
			arr.unshift('');
		}
		return arr;
	}

	//获取服务亭运输分拣中心轨迹航线数据
	getPackgeData(cityId,mapName){
		axios.get('/count/countfactory/housetransportpackagestationmap?cityId=' + cityId).then((data) => {
			let res = data.data;
			if(res.code == 0){
				let _packageData = [];
				let names = [];
				if(res.data && res.data.length > 0){
					res.data.forEach((item,index) => {
						names.push(item.packageName);
						_packageData[index] = [
							item.packageName,
							[]
						]
						if(item.houseList && item.houseList.length > 0){
							item.houseList.forEach((subItem,subIndex) =>{
								_packageData[index][1].push([{
									name:item.packageName //分拣中心名称
								},{
									packageId:item.packageId, //分拣中心id
									packageName:item.packageName, //分拣中心名称
									packageCoordinate:[item.packageJingdu,item.packageWeidu], //分拣中心坐标
									name:subItem.nickName, //服务亭名称
									id:subItem.houseId, //服务亭id
									weight:subItem.outWeight/1000000, //服务亭重量
									houseCoordinate:[subItem.houseJingdu,subItem.houseWeidu], //服务亭坐标
									symbol:20 //服务亭圆点大小
								}])
							})
						}
					})
				}

				setTimeout(()=>{
					this.setState({
						packageNames:names,
						packageData:_packageData
					})

					//服务亭运输分拣中心轨迹航线地图
					this.renderHousePackageMap(mapName);
				},100)
			}else{
				MessageBox.alert(res.msg)
			}
		}).catch((e) => {
			console.log(e)
		})
	}

	//获取城市销售轨迹航线数据
	getRouteMapData(){
		axios.get('/count/countfactory/citysalesroutemap').then((data) => {
			let res = data.data;
			if(res.code == 0){
				let temp = [];
				let _mainData = [];
				if(res.data && res.data.length > 0){
					res.data.forEach((item,index) => {
						_mainData[index] = [
							item.cityName,
							[]
						]
						temp.push(item.cityName)
						item.list.forEach((subItem,subIndex) =>{
							_mainData[index][1].push([{
								name:item.cityName,
								cityId:item.cityId
							},{
								name:subItem.factoryName, //分拣中心名称
								id:subItem.factoryId, //分拣中心工厂id
								weight:subItem.inWeight/1000000, //分拣中心重量
								coordinate:[subItem.longitude,subItem.latitude], //分拣中心坐标
								symbol:20 //分拣中心圆点大小
							}])
						})
					})
				}

				setTimeout(() =>{
					this.setState({
						cityNames: temp,
						mainData:_mainData
					})
				},100)
			}else{
				MessageBox.alert(res.msg)
			}
		}).catch((e) => {
			console.log(e)
		})
	}

	//获取该分站下所有分拣中心及服务亭经纬度坐标
	getPackgeHouseCoordData(cityId){
		axios.get('/count/countfactory/housetransportpackagestationmap?cityId=' + cityId).then((data) => {
			let res = data.data;
			console.log(res)
			if(res.code == 0){
				let allCoordinate = [];
				if(res.data && res.data.length > 0){
					res.data.forEach((item,index)=>{
						allCoordinate.push({
							name:item.packageName, //分拣中心名字
							value:200, //圆点大小
							id:item.packageId, //分拣中心id
							coordinate:[item.packageJingdu,item.packageWeidu] //分拣中心坐标
						})
						if(item.houseList && item.houseList.length > 0){
							item.houseList.forEach((subItem,subIndex) =>{
								allCoordinate.push({
									name:subItem.nickName, //服务亭名称
									value:160, //圆点大小
									id:subItem.houseId, //服务亭id
									coordinate:[subItem.houseJingdu,subItem.houseWeidu] //服务亭坐标
								})
							})
						}
					})

					setTimeout(()=>{
						this.setState({
							allCoordinate:allCoordinate
						})

						document.querySelector('#map').style.display = 'none';
						document.querySelector('#return').style.display = 'block';
						document.querySelector('#smallMap').style.display = 'block';
						//初始化该分站下所有分拣中心及服务亭地图
						this.renderSubstationMap();
					},100)
				}
			}else{

			}
		}).catch((e)=>{
			console.log(e)
		})
	}

	//初始化地图
	renderMap(){
		let dom = document.getElementById("map");
		let myChart = echarts.init(dom);
		let option = null;

		//value控制点的大小
		let _data = this.state.substationData;
		//var data = [{ name: '海门', value: 200, id: 9999 }, { name: '鄂尔多斯', value: 102, id: 9999 }, { name: '招远', value: 120, id: 9999 }, { name: '舟山', value: 120, id: 9999 }, { name: '岳阳', value: 169, id: 9999 }, { name: '长沙', value: 175, id: 9999 }, { name: '衢州', value: 177, id: 9999 }, { name: '廊坊', value: 193, id: 9999 }, { name: '菏泽', value: 194, id: 9999 }, { name: '合肥', value: 229, id: 9999 }, { name: '武汉', value: 273, id: 9999 }, { name: '大庆', value: 279, id: 9999 }];

		var convertData = function convertData(data) {
			let res = [];
			for (var i = 0; i < data.length; i++) {
				var _name = data[i].name.replace(/市/,'');
				var geoCoord = geoCoordMap[_name];
				if (geoCoord) {
					res.push({
						name: data[i].name, //分站name
						value: geoCoord.concat(data[i].value), //显示圆点大小
						//id: data[i].id, //分站id
						cityId: data[i].cityId //城市id
					});
				}
			}
			return res;
		};

		option = {
			//backgroundColor: '#404a59',
			title: {
				text: '', //标题
				subtext: '', //子标题
				sublink: '#', //subtext跳转地址
				left: 'center',
				textStyle: {
					color: '#fff'
				}
			},
			tooltip: {
				trigger: 'item',
				show: true, //隐藏提示框
				formatter: function formatter(params, ticket, callback) {
					var $pna = params.name;
					//console.log($pna);
					var res = '';
					for (var i = 0; i < _data.length; i++) {
						if (_data[i].name == $pna) {
							res = '' + _data[i].name; //设置自定义数据的模板，这里的模板是图片
							//console.log(res);
							break;
						}
					}
					setTimeout(function () {
						// 仅为了模拟异步回调
						callback(ticket, res); //回调函数，这里可以做异步请求加载的一些代码
					}, 300);
					return 'loading...';
				}
			},
			// bmap: {
			// 	map: 'china',
			// 	center: [104.114129, 37.550339], //中心点
			// 	zoom: 5, //5是显示全国地图
			// 	roam: true,
			// 	mapStyle: {
			// 		styleJson: [{
			// 			"featureType": "water", //水的颜色
			// 			"elementType": "all",
			// 			"stylers": {
			// 				"color": "#044161"
			// 			}
			// 		}, {
			// 			"featureType": "land", //地图背景色 调整土地颜色
			// 			"elementType": "all",
			// 			"stylers": {
			// 				"color": "#004981"
			// 			}
			// 		}, {
			// 			'featureType': 'railway', //铁路线
			// 			'elementType': 'all',
			// 			'stylers': {
			// 				'visibility': 'off'
			// 			}
			// 		}, {
			// 			"featureType": "boundary", //china轮廓线
			// 			"elementType": "geometry",
			// 			"stylers": {
			// 				"color": "#42e7f9", //地图边框颜色
			// 				"areaColor": '#0e2338' //各区域底色
			// 			}
			// 		}, {
			// 			"featureType": "highway", //调整高速道路颜色
			// 			"elementType": "geometry",
			// 			"stylers": {
			// 				"color": "#004981"
			// 			}
			// 		}, {
			// 			"featureType": "highway", //调整高速道路颜色
			// 			"elementType": "geometry.fill",
			// 			"stylers": {
			// 				"color": "#005b96",
			// 				"lightness": 1
			// 			}
			// 		}, {
			// 			"featureType": "highway", //调整高速道路是否可现
			// 			"elementType": "labels",
			// 			"stylers": {
			// 				"visibility": "off"
			// 			}
			// 		}, {
			// 			"featureType": "arterial",
			// 			"elementType": "geometry",
			// 			"stylers": {
			// 				"color": "#004981"
			// 			}
			// 		}, {
			// 			"featureType": "arterial",
			// 			"elementType": "geometry.fill",
			// 			"stylers": {
			// 				"color": "#00508b"
			// 			}
			// 		}, {
			// 			"featureType": "poi",
			// 			"elementType": "all",
			// 			"stylers": {
			// 				"visibility": "off"
			// 			}
			// 		}, {
			// 			"featureType": "green",
			// 			"elementType": "all",
			// 			"stylers": {
			// 				"color": "#056197",
			// 				"visibility": "off"
			// 			}
			// 		}, {
			// 			"featureType": "subway", //调整地铁颜色
			// 			"elementType": "all",
			// 			"stylers": {
			// 				"visibility": "off"
			// 			}
			// 		}, {
			// 			"featureType": "manmade",
			// 			"elementType": "all",
			// 			"stylers": {
			// 				"visibility": "off"
			// 			}
			// 		}, {
			// 			"featureType": "local",
			// 			"elementType": "all",
			// 			"stylers": {
			// 				"visibility": "off"
			// 			}
			// 		}, {
			// 			"featureType": "arterial",
			// 			"elementType": "labels",
			// 			"stylers": {
			// 				"visibility": "on"
			// 			}
			// 		}, {
			// 			"featureType": "boundary", //分界线
			// 			"elementType": "geometry.fill",
			// 			"stylers": {
			// 				"color": "#029fd4"
			// 			}
			// 		}, {
			// 			"featureType": "building", //调整建筑物颜色
			// 			"elementType": "all",
			// 			"stylers": {
			// 				"color": "#1a5787"
			// 			}
			// 		}, {
			// 			"featureType": "label",
			// 			"elementType": "all",
			// 			"stylers": {
			// 				"visibility": "off"
			// 			}
			// 		}]
			// 	}
			// },
			geo: {
	        	map: 'china',
	        	//默认缩放级别1
	            zoom: 1.5,
	        	//是否可以点击鼠标、滚轮缩放
				roam: true,
				//鼠标移入是否显示省份
	            label: {
	                emphasis: {
	                    show: false
	                }
	            },
	            itemStyle: {
	                normal: {
	                    areaColor: '#004981',
	                    borderColor: '#42e7f9'
	                },
	                emphasis: {
	                    areaColor: '#004981'
	                }
	            },
	            // regions: [
	            // 	{
	            // 		 name: '陕西',
	            // 		 itemStyle: {
			          //       areaColor: '#089dd4'
			          //   }
	            // 	},
	            // 	{
	            // 		 name: '湖北',
	            // 		 itemStyle: {
			          //       areaColor: '#089dd4'
			          //   }
	            // 	},
	            // 	{
	            // 		 name: '安徽',
	            // 		 itemStyle: {
			          //       areaColor: '#089dd4'
			          //   }
	            // 	},
	            // 	{
	            // 		 name: '江苏',
	            // 		 itemStyle: {
			          //       areaColor: '#089dd4'
			          //   }
	            // 	},
	            // ]
	        },
			series: [{
				name: ' ',
				type: 'scatter',
				coordinateSystem: 'geo',
				data: convertData(_data),
				symbolSize: function symbolSize(val) {
					return val[2] / 12;
				},
				label: {
					normal: {
						formatter: '{b}',
						position: 'right',
						show: false
					},
					emphasis: {
						show: false
					}
				},
				itemStyle: {
					normal: {
						color: '#ddd436'
					}
				}
			}, {
				name: '',
				type: 'effectScatter', // 表的类型 这里是散点
				coordinateSystem: 'geo', // 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件
				data: convertData(_data.sort(function (a, b) {
					//排序后给值最大的加闪烁动画
					return b.value - a.value;
				}).slice(0, 8)),
				symbolSize: function symbolSize(val) {
					return val[2] / 16; //圆圈大小
				},
				showEffectOn: 'render', //圆点是否闪烁 是：render 否：emphasis
				rippleEffect: {
					brushType: 'stroke'
				},
				hoverAnimation: true,
				label: {
					normal: {
						formatter: '{b}',
						position: 'right',
						show: true
					}
				},
				itemStyle: {
					normal: {
						color: '#edd721', //'rgb(232, 33, 79)', //圆圈颜色
						shadowBlur: 10,
						shadowColor: '#333'
					}
				},
				zlevel: 1
			}]
		};

		let that = this;

		if (option && (typeof option === 'undefined' ? 'undefined' : typeof(option)) === "object") {
			myChart.setOption(option, true);
			//map上的点的点击事件
			myChart.on('click', function (params) {
				//params包含了所有数据 需要什么拿什么
				//window.location.href = '/?xxxxx=xxxxxxxx'
				console.log(params);
				let cityId = params.data.cityId;
				if(!cityId) return;
				//获取该分站下所有的服务亭和分拣中心
				that.getPackgeHouseCoordData(cityId);
			});
		}
	}

	//初始化该分站下所有分拣中心及服务亭地图
	renderSubstationMap(){
		var dom = document.getElementById("smallMap");
		var myChart = echarts.init(dom);
		var option = null;

		//value控制点的大小
		var _data = this.state.allCoordinate;
		//var data = [{ name: '海门', value: 200, id: 9999 }, { name: '鄂尔多斯', value: 102, id: 9999 }, { name: '招远', value: 120, id: 9999 }, { name: '舟山', value: 120, id: 9999 }, { name: '岳阳', value: 169, id: 9999 }, { name: '长沙', value: 175, id: 9999 }, { name: '衢州', value: 177, id: 9999 }, { name: '廊坊', value: 193, id: 9999 }, { name: '菏泽', value: 194, id: 9999 }, { name: '合肥', value: 229, id: 9999 }, { name: '武汉', value: 273, id: 9999 }, { name: '大庆', value: 279, id: 9999 }];

		var convertData = function convertData(data) {
			var res = [];
			for (var i = 0; i < data.length; i++) {
				res.push({
					name: data[i].name, //分站name
					value: data[i].coordinate.concat(data[i].value), //显示圆点大小
					id: data[i].id //分站id
				});
			}
			return res;
		};

		option = {
			//backgroundColor: '#404a59',
			title: {
				text: '', //标题
				subtext: '', //子标题
				sublink: '#', //subtext跳转地址
				left: 'center',
				textStyle: {
					color: '#fff'
				}
			},
			tooltip: {
				trigger: 'item',
				show: true, //隐藏提示框
				formatter: function formatter(params, ticket, callback) {
					var $pna = params.name;
					//console.log($pna);
					var res = '';
					for (var i = 0; i < _data.length; i++) {
						if (_data[i].name == $pna) {
							res = '' + _data[i].name; //设置自定义数据的模板，这里的模板是图片
							//console.log(res);
							break;
						}
					}
					setTimeout(function () {
						// 仅为了模拟异步回调
						callback(ticket, res); //回调函数，这里可以做异步请求加载的一些代码
					}, 300);
					return 'loading...';
				}
			},
			bmap: {
				map: 'china',
				center: _data[0].coordinate, //中心点
				zoom: 13, //5是显示全国地图
				roam: true,
				mapStyle: {
					styleJson: [{
						"featureType": "water", //水的颜色
						"elementType": "all",
						"stylers": {
							"color": "#044161"
						}
					}, {
						"featureType": "land", //地图背景色 调整土地颜色
						"elementType": "all",
						"stylers": {
							"color": "#004981"
						}
					}, {
						'featureType': 'railway', //铁路线
						'elementType': 'all',
						'stylers': {
							'visibility': 'off'
						}
					}, {
						"featureType": "boundary", //china轮廓线
						"elementType": "geometry",
						"stylers": {
							"color": "#42e7f9", //地图边框颜色
							"areaColor": '#0e2338' //各区域底色
						}
					}, {
						"featureType": "highway", //调整高速道路颜色
						"elementType": "geometry",
						"stylers": {
							"color": "#004981"
						}
					}, {
						"featureType": "highway", //调整高速道路颜色
						"elementType": "geometry.fill",
						"stylers": {
							"color": "#005b96",
							"lightness": 1
						}
					}, {
						"featureType": "highway", //调整高速道路是否可现
						"elementType": "labels",
						"stylers": {
							"visibility": "off"
						}
					}, {
						"featureType": "arterial",
						"elementType": "geometry",
						"stylers": {
							"color": "#004981"
						}
					}, {
						"featureType": "arterial",
						"elementType": "geometry.fill",
						"stylers": {
							"color": "#00508b"
						}
					}, {
						"featureType": "poi",
						"elementType": "all",
						"stylers": {
							"visibility": "off"
						}
					}, {
						"featureType": "green",
						"elementType": "all",
						"stylers": {
							"color": "#056197",
							"visibility": "off"
						}
					}, {
						"featureType": "subway", //调整地铁颜色
						"elementType": "all",
						"stylers": {
							"visibility": "off"
						}
					}, {
						"featureType": "manmade",
						"elementType": "all",
						"stylers": {
							"visibility": "off"
						}
					}, {
						"featureType": "local",
						"elementType": "all",
						"stylers": {
							"visibility": "off"
						}
					}, {
						"featureType": "arterial",
						"elementType": "labels",
						"stylers": {
							"visibility": "off"
						}
					}, {
						"featureType": "boundary", //分界线
						"elementType": "geometry.fill",
						"stylers": {
							"color": "#029fd4"
						}
					}, {
						"featureType": "building", //调整建筑物颜色
						"elementType": "all",
						"stylers": {
							"color": "#1a5787"
						}
					}, {
						"featureType": "label",
						"elementType": "all",
						"stylers": {
							"visibility": "off"
						}
					}]
				}
			},
			
			series: [{
				name: ' ',
				type: 'scatter',
				coordinateSystem: 'bmap',
				data: convertData(_data),
				symbolSize: function symbolSize(val) {
					return val[2] / 10;
				},
				label: {
					normal: {
						formatter: '{b}',
						position: 'right',
						show: false
					},
					emphasis: {
						show: false
					}
				},
				itemStyle: {
					normal: {
						color: '#ddd436'
					}
				}
			}, {
				name: '',
				type: 'effectScatter', // 表的类型 这里是散点
				coordinateSystem: 'bmap', // 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件
				data: convertData(_data.sort(function (a, b) {
					//排序后给值最大的加闪烁动画
					return b.value - a.value;
				}).slice(0, 8)),
				symbolSize: function symbolSize(val) {
					return val[2] / 14; //圆圈大小
				},
				showEffectOn: 'render', //圆点是否闪烁 是：render 否：emphasis
				rippleEffect: {
					brushType: 'stroke'
				},
				hoverAnimation: true,
				label: {
					normal: {
						formatter: '{b}',
						position: 'right',
						show: true
					}
				},
				itemStyle: {
					normal: {
						color: '#ddb926', //'rgb(232, 33, 79)', //圆圈颜色
						shadowBlur: 10,
						shadowColor: '#333'
					}
				},
				zlevel: 1
			}]
		};

		if (option && (typeof option === 'undefined' ? 'undefined' : typeof(option)) === "object") {
			myChart.setOption(option, true);
		}
	}

	//初始化城市销售轨迹航线图
	renderRouteMap(){
		var dom = document.getElementById("routeMap");
		var myChart = echarts.init(dom);
		let option = null;
		var that = this;

		var _data = this.state.mainData;

		// var BJData = [
	 //        [{
	 //            name: '北京'
	 //        }, {
	 //            name: '上海',
	 //            value: 95,
	 //            weight:100
	 //        }],
	 //        [{
	 //            name: '北京'
	 //        }, {
	 //            name: '广州',
	 //            value: 90,
	 //            weight:95
	 //        }]
	 //    ];

	    //var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
	    var carPath = 'path://M727.5,923.582V342.756c0-5.295,2.637-10.256-5.043-10.256h-52.139c8.865,0,6.182-5.204,6.182-11.831V206.928L517.985,71.5H397.447c-8.864,0-20.947,5.541-20.947,12.169v158.685c0,0-0.418-0.01-0.551-0.01c-44.088,0-79.904,35.739-79.904,79.825s35.856,79.824,79.943,79.824c0.133,0,0.512-0.009,0.512-0.01v230.371c0,0-0.418-0.01-0.551-0.01c-44.088,0-79.904,35.738-79.904,79.824s35.856,79.824,79.943,79.824c0.133,0,0.512-0.01,0.512-0.01v131.599c0,5.294,10.312,8.918,17.994,8.918h327.963C730.137,932.5,727.5,928.876,727.5,923.582z';

	    var convertData = function(data) {
	        var res = [];
	        for (var i = 0; i < data.length; i++) {
	            var dataItem = data[i];
	            var _name = dataItem[0].name.replace('市','');
	            var cityId = dataItem[0].cityId;
	            var fromCoord = geoCoordMap[_name];
	            var toCoord = dataItem[1].coordinate;
	            var weight = dataItem[1].weight;
				if(toCoord[0] == null || toCoord[1] == null){
					toCoord = fromCoord;
				}
	            if (fromCoord && toCoord) {
	                res.push([{
	                    coord: fromCoord
	                }, {
	                    coord: toCoord
	                }, {
	                	value: weight
	                },{
	                	cityId: cityId
	                }]);
	            }
	        }
	        return res;
	    };

	    var color = ['#ffa022', '#a6c84c', '#46bee9', '#00ffff'];
	    var series = [];
	    // [
	    //     ['北京', BJData],
	    //     ['上海', SHData],
	    //     ['广州', GZData]
	    // ]
	    console.log(_data)
	    _data.forEach(function(item, i) {
	        series.push({
	        	// 系列名称，用于tooltip的显示
	            name: item[0],
	            type: 'lines',
	            //coordinateSystem: 'bmap',
	            zlevel: 1,
	            //出发到目的地 的白色尾巴线条
      			// 线特效的配置
	            effect: {
	                show: true,
	                period: 3, // 特效动画的时间，单位为 s
	                trailLength: 0.8, // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
	                color: '#ffffff', // 特效标记的颜色
	                symbolSize: 3 // 特效标记的大小
	            },
	            label: {
	                normal: {
	                    show: true,
	                    position: 'middle',
	                    formatter: ( params ) =>{
	                      //console.log(params);
	                      var todata = params.data.coords[1];
	                      var res;
	                      convertData(item[1]).map(function( item ){
	                        var data = item[1].coord;
	                        if( data[0] == todata[0] && data[1] == todata[1] ){
	                          res = item[2].value + '吨';
	                        }
	                      })
	                      return res
	                    }
	                }
	            },
	            //出发到目的地 的线条颜色
	            lineStyle: {
	                normal: {
	                    color: color[i],
	                    width: 0,
	                    curveness: 0.2 //fu度
	                }
	            },
	            //开始到结束数据
	            data: convertData(item[1])
	        }, { // 出发地信息
	            name: item[0],
	            type: 'effectScatter',
	            coordinateSystem: 'geo',
	            zlevel: 2,
	            rippleEffect: {
	                brushType: 'stroke'
	            },
	            label: {
	                normal: {
	                    show: true,
	                    position: 'bottom',
	                    formatter: '{b}'
	                }
	            },
	            symbolSize: function(val) {
	                return val[2] / 2;
	            },
	            itemStyle: {
	                normal: {
	                    color: color[i]
	                }
	            },
	            data: item[1].map(function(dataItem) {
	            	var _name = dataItem[0].name.replace('市','');
	                return {
	                    name: dataItem[0].name,
	                    value: geoCoordMap[_name].concat([dataItem[1].symbol]),
	                    cityId: dataItem[0].cityId
	                };
	            })
	        }, { // 目的地信息
	            name: item[0],
	            type: 'effectScatter',
	            //coordinateSystem: 'bmap',
	            coordinateSystem: 'geo',
	            zlevel: 2,
	            rippleEffect: {
	                brushType: 'stroke'
	            },
	            label: {
	                normal: {
	                    show: true,
	                    position: 'bottom',
	                    formatter: '{b}'
	                }
	            },
	            symbolSize: function(val) {
	                return val[2] / 2;
	            },
	            itemStyle: {
	                normal: {
	                    color: color[i]
	                }
	            },
	            data: item[1].map(function(dataItem) {
	            	var _name = dataItem[0].name.replace('市','');
	                return {
	                    name: dataItem[1].name,
	                    value: dataItem[1].coordinate.concat([dataItem[1].symbol]),
	                    cityId: dataItem[0].cityId
	                };
	            })
	        });
	    });

	    //打包分站城市数据
	    var cityNames = this.state.cityNames;

	    option = {
	        tooltip: {
	            trigger: 'item',
				show: true, //隐藏提示框
				formatter: function formatter(params, ticket, callback) {
					var $pna = params.name;
					setTimeout(function () {
						// 仅为了模拟异步回调
						callback(ticket, $pna); //回调函数，这里可以做异步请求加载的一些代码
					}, 300);
					return 'loading...';
				}
	        },
	        legend: {
	            orient: 'vertical',
	            top: 'bottom',
	            left: 'right',
	            data: [],
	            //data: cityNames,
	            textStyle: {
	                color: '#fff'
	            },
	            selectedMode: 'single'
	        },
	        geo: {
	        	map: 'china',
	        	//默认缩放级别1
	            zoom: 1.5,
	        	//是否可以点击鼠标、滚轮缩放
				roam: true,
				//鼠标移入是否显示省份
	            label: {
	                emphasis: {
	                    show: false
	                }
	            },
	            itemStyle: {
	                normal: {
	                    areaColor: '#004981',
	                    borderColor: '#42e7f9'
	                },
	                emphasis: {
	                    areaColor: '#004981'
	                }
	            }
	        },
	        series: series
	    };

	    myChart.setOption(option);
	    myChart.resize();
	    myChart.on('click', function (params) {
	      console.log(params);
	      let cityName = params.seriesName;
	      let cityId = '';
	      if(params.data && params.data.cityId){
	      	cityId = params.data.cityId;
	      }else{
	      	return false;
	      }

	      if(cityName && cityName.indexOf('咸宁') > -1){
			echarts.registerMap('xianning',xianning);
			document.querySelector('#return').style.display = 'none';
			document.querySelector('#routeMap').style.display = 'none';
			document.querySelector('#housePackageMap').style.display = 'block';

			//获取该分站下分拣中心及服务亭轨迹航线数据
			that.getPackgeData(cityId,'xianning');
	      }
	      if(cityName && cityName.indexOf('蚌埠') > -1){
			echarts.registerMap('bengbu',bengbu);
			document.querySelector('#return').style.display = 'none';
			document.querySelector('#routeMap').style.display = 'none';
			document.querySelector('#housePackageMap').style.display = 'block';

			//获取该分站下分拣中心及服务亭轨迹航线数据
			that.getPackgeData(cityId,'bengbu');
	      }
	      if(cityName && cityName.indexOf('西安') > -1){
			echarts.registerMap('xian',xian);
			document.querySelector('#return').style.display = 'none';
			document.querySelector('#routeMap').style.display = 'none';
			document.querySelector('#housePackageMap').style.display = 'block';

			//获取该分站下分拣中心及服务亭轨迹航线数据
			that.getPackgeData(cityId,'xian');
	      }
	      if(cityName && cityName.indexOf('杭州') > -1){
			echarts.registerMap('hangzhou',hangzhou);
			document.querySelector('#return').style.display = 'none';
			document.querySelector('#routeMap').style.display = 'none';
			document.querySelector('#housePackageMap').style.display = 'block';

			//获取该分站下分拣中心及服务亭轨迹航线数据
			that.getPackgeData(cityId,'hangzhou');
	      }
	      if(cityName && cityName.indexOf('银川') > -1){
			echarts.registerMap('yinchuan',yinchuan);
			document.querySelector('#return').style.display = 'none';
			document.querySelector('#routeMap').style.display = 'none';
			document.querySelector('#housePackageMap').style.display = 'block';

			//获取该分站下分拣中心及服务亭轨迹航线数据
			that.getPackgeData(cityId,'yinchuan');
	      }
	    });
	}

	//初始化服务亭运输分拣中心轨迹航线图
	renderHousePackageMap(mapName){
		var dom = document.getElementById("housePackageMap");
		var myChart = echarts.init(dom);
		let option = null;
		let _data = this.state.packageData;

	    var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

	    var convertData = function(data) {
	        var res = [];
	        for (var i = 0; i < data.length; i++) {
	            var dataItem = data[i];
	            var fromCoord = dataItem[1].houseCoordinate; //起始点
	            var toCoord = dataItem[1].packageCoordinate; //结束点
	            var weight = dataItem[1].weight;
	            //if (fromCoord && toCoord) {
	                res.push([{
	                    coord: fromCoord
	                }, {
	                    coord: toCoord
	                }, { 
	                  value: weight
	                }]);
	            //}
	        }
	        return res;
	    };

	    var color = ['#a6c84c', '#ffa022', '#46bee9', '#46bee9'];
	    var series = [];
	    console.log(_data)

	    _data.forEach(function(item, i) {
	        series.push({
	            name: item[0],
	            type: 'lines',
	            zlevel: 1,
	            //出发到目的地 的白色尾巴线条
      			// 线特效的配置
	            effect: {
	                show: true,
	                period: 3, // 特效动画的时间，单位为 s
	                trailLength: 0.8, // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
	                color: '#fff', // 特效标记的颜色
	                symbolSize: 3 // 特效标记的大小
	            },
	            label: {
	                normal: {
	                    show: true,
	                    position: 'middle',
	                    formatter: ( params ) =>{
	                      //console.log(params);
	                      var todata = params.data.coords[1];
	                      var res;
	                      convertData(item[1]).map(function( item ){
	                        var data = item[1].coord;
	                        if( data[0] == todata[0] && data[1] == todata[1] ){
	                          res = item[2].value + '吨';
	                        }
	                      })
	                      return res
	                    }
	                }
	            },
	            lineStyle: {
	                normal: {
	                    color: color[i],
	                    width: 0,
	                    curveness: 0.2
	                }
	            },
	            //开始到结束数据
	            data: convertData(item[1])
	        }, { //出发地
	            name: item[0],
	            type: 'effectScatter',
	            coordinateSystem: 'geo',
	            zlevel: 2,
	            effect: {
	                show: true,
	                period: 6,
	                trailLength: 0,
	                symbol: 'none', //planePath 飞机图标
	                symbolSize: 18
	            },
	            label: {
	                normal: {
	                    show: true,
	                    position: 'bottom',
	                    formatter: '{b}'
	                }
	            },
	            symbolSize: function(val) {
	                return val[2] / 2;
	            },
	            lineStyle: {
	                normal: {
	                    color: color[i],
	                    width: 1,
	                    opacity: 0.4,
	                    curveness: 0.2
	                }
	            },
	            data: item[1].map(function(dataItem) {
	                return {
	                    name: dataItem[0].name,
	                    value: dataItem[1].packageCoordinate.concat([dataItem[1].symbol]),
	                    id: dataItem[1].id
	                };
	            })
	        }, { //目的地
	            name: item[0],
	            type: 'effectScatter',
	            coordinateSystem: 'geo',
	            zlevel: 2,
	            rippleEffect: {
	                brushType: 'stroke'
	            },
	            label: {
	                normal: {
	                    show: true,
	                    position: 'bottom',
	                    formatter: '{b}'
	                }
	            },
	            symbolSize: function(val) {
	                return val[2] / 2;
	            },
	            itemStyle: {
	                normal: {
	                    color: color[i]
	                }
	            },
	            data: item[1].map(function(dataItem) {
	                return {
	                    name: dataItem[1].name,
	                    value: dataItem[1].houseCoordinate.concat([dataItem[1].symbol]),
	                    id: dataItem[1].id
	                };
	            })
	        });
	    });

	    //打包分站城市数据
	    var packageNames = this.state.packageNames;

	    option = {
	        tooltip: {
	            trigger: 'item',
				show: true, //隐藏提示框
				formatter: function formatter(params, ticket, callback) {
					var $pna = params.name;
					setTimeout(function () {
						// 仅为了模拟异步回调
						callback(ticket, $pna); //回调函数，这里可以做异步请求加载的一些代码
					}, 300);
					return 'loading...';
				}
	        },
	        legend: {
	            orient: 'vertical',
	            top: 'bottom',
	            left: 'right',
	            data: [],
	            textStyle: {
	                color: '#fff'
	            },
	            selectedMode: 'single'
	        },
	        geo: {
	            map: mapName, //初始化哪个城市地图
	            label: {
	                emphasis: {
	                    show: true
	                }
	            },
	        	//默认缩放级别1
	            zoom: 1.3,
	            roam: true,
	            itemStyle: {
	                normal: {
	                    areaColor: '#004981',
	                    borderColor: '#42e7f9'
	                },
	                emphasis: {
	                    areaColor: '#004981'
	                }
	            }
	        },
	        series: series
	    };

	    myChart.setOption(option);
	    myChart.resize();
	    myChart.on('click', function (params) {
	      //console.log(params);
	    });
	}

	//获取各图表数据
	getEchartsData(subId){
		axios.get('/count/count/haoleirevivesourcedataanalyse?subId=' + subId).then((data) => {
			console.log(data)
			let res = data.data;
			//今日回收量top5
			let todayRecycleDataList = [];
			if(res.todayRecycleDataList && res.todayRecycleDataList.length > 5){
				todayRecycleDataList = res.todayRecycleDataList.slice(0,5);
			}else{
				todayRecycleDataList = res.todayRecycleDataList;
			}
			this.setState({
				everyMonthRecycleList: res.everyMonthRecycleList,
				everyKindsReliveResourcesRecycleList: res.everyKindsReliveResourcesRecycleList,
				todayRecycleDataList: todayRecycleDataList,
				everyMonthTurnoverList: res.everyMonthTurnoverList,
				packageStationCounts: res.packageStationCounts,
				cashCount: res.overallSituationList[0].cashCount,
				weightCount: res.overallSituationList[1].weightCount,
				recycleTimesCount: res.overallSituationList[2].recycleTimesCount
			})
			//各类再生资源回收量占比
			this.renderRecycleBox();
			//回收量趋势图
			this.renderRecycleWeight();
			//回收金额趋势图
			this.renderRecycleMoney();
		}).catch((e) => {
			console.log(e)
		})
	}

	//各类再生资源回收量占比
	renderRecycleBox(){
		var recycleChart = echarts.init(document.getElementById('recycleBoxChartContainer'));
		var everyKindsReliveResourcesRecycleList = this.state.everyKindsReliveResourcesRecycleList;
		//回收量数据
		var _data = [];
		var colorList = ['#00ffff', '#97dd42', '#ffff43', '#f19f4e', '#efe39b', '#ff4e4e', '#0035f9', '#ff6600', '#ffffff', '#97dd42','#333333','#f1f1f1','#999999','#3C99D8','#ff0000','yellow'];
		colorList = colorList.slice(0,everyKindsReliveResourcesRecycleList.length);
		everyKindsReliveResourcesRecycleList.forEach((item,index)=>{
			_data.push({
				name: item.recycleTypeName,
				value: (item.countWeight/1000000).toFixed(2)
			})
		})
		var option = {
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b} : {c} ({d}%)" //{a}name {b}类别 {c}数值 {d}占比
			},
			legend: [{
				orient: 'vertical',
				//left: 'left',
				x: 50,
				y: 25,
				textStyle: {
					color: '#49d9fe'
				},
				itemGap: 10,
				data: _data.slice(0,8)

			}, {
				orient: 'vertical',
				x: 180,
				y: 25,
				textStyle: {
					color: '#49d9fe'
				},
				itemGap: 10,
				data: _data.slice(8,16)
			}],
			series: [{
				name: '回收占比',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				startAngle: 30,
				itemStyle: {
					normal: {
						color: function color(params) {
							//var colorList = ['#00ffff', '#97dd42', '#ffff43', '#f19f4e', '#efe39b', '#ff4e4e', '#0035f9'];
							return colorList[params.dataIndex];
						},
						shadowColor: "rgba(255,255,255,0)",
						shadowBlur: 35
					}
				},
				emphasis: {
					itemStyle: {
						shadowColor: "#rgba(255,255,255,0.5)",
						shadowBlur: 35
					}
				},
				label: {
					normal: {
						show: true,
						position: 'outside',
						formatter: "{d}%"
					}
				},
				labelLine: {
					normal: {
						show: true
					}
				},
				center: ['65%', '50%'],
				data: _data
			}]
		};

		recycleChart.setOption(option);
		recycleChart.resize();
	}

	//回收金额趋势图
	renderRecycleMoney(){
		var rubbishChart = echarts.init(document.getElementById('recycleMoneyChartContainer'));
		var everyMonthTurnoverList = this.state.everyMonthTurnoverList;
		var monthArr = [];
		var _data = [];
		everyMonthTurnoverList.forEach((item,index)=>{
			monthArr.push(item.months);
			_data.push(item.everyMonthTurnover/100);
		})

		// option
		var option = {
			tooltip: {
				trigger: 'axis',
				formatter: "{b} <br/>{a}: {c}元"
			},
			grid: {
				left: '2%',
				right: '3%',
				top: '5%',
				bottom: '5%',
				containLabel: true
			},
			color: '#01fdfe',
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: monthArr,
				axisLine: {
					lineStyle: {
						color: '#416dda'
					}
				},
				axisLabel: {
					color: "#fff",
					interval: 0,
					formatter: function formatter(params) {
						//换行显示
						var newParamsName = ""; // 最终拼接成的字符串
						var paramsNameNumber = params.length; // 实际标签的个数
						var provideNumber = 5; // 每行能显示的字的个数
						var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
						/**
	      * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
	      */
						// 条件等同于rowNumber>1
						if (paramsNameNumber > provideNumber) {
							/** 循环每一行,p表示行 */
							for (var p = 0; p < rowNumber; p++) {
								var tempStr = ""; // 表示每一次截取的字符串
								var start = p * provideNumber; // 开始截取的位置
								var end = start + provideNumber; // 结束截取的位置
								// 此处特殊处理最后一行的索引值
								if (p == rowNumber - 1) {
									// 最后一次不换行
									tempStr = params.substring(start, paramsNameNumber);
								} else {
									// 每一次拼接字符串并换行
									tempStr = params.substring(start, end) + "\n";
								}
								newParamsName += tempStr; // 最终拼成的字符串
							}
						} else {
							// 将旧标签的值赋给新标签
							newParamsName = params;
						}
						//将最终的字符串返回
						return newParamsName;
					}
				}
			},
			yAxis: {
				type: 'value',
				splitNumber: 3,
				splitLine: {
					show: true,
					lineStyle: {
						color: '#233c6c',
						type: 'dotted'
					}
				},
				axisLabel: {
					color: "#fff",
					interval: 0
				},
				axisLine: {
					lineStyle: {
						color: '#416dda'
					}
				},
				axisTick: {
					length: 10
				}
			},
			series: [{
				name: '回收金额',
				type: 'line',
				data: _data, //数据
				areaStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0, color: '#00ffff' // 0% 处的颜色
						}, {
							offset: .75, color: '#015a7c' // 100% 处的颜色
						}],
						globalCoord: false // 缺省为 false
					},
					opacity: 0.6
				}
			}]
		};
		rubbishChart.setOption(option);
		rubbishChart.resize();
	}

	//回收量趋势图
	renderRecycleWeight(){
		var peopleChart = echarts.init(document.getElementById('recycleWeightChartContainer'));
		var everyMonthRecycleList = this.state.everyMonthRecycleList;
		var monthArr = [];
		var _data = [];
		var number = 0;
		everyMonthRecycleList.forEach((item,index)=>{
			monthArr.push(item.months);
			_data.push((item.everyMonthRecycle/1000000));
			number +=1;
		})
		if(_data[0] === 0 && _data[1] === 0 && _data[2] === 0 && _data[3] === 0 && _data[4] === 0 && _data[5] === 0 && _data[6] !== 0){
			_data[_data.length-2] = 0.001;
		}
		var max = Math.max.apply(null, _data);
        var maxArr = [];
        for(var i=0;i<number;i++ ){
          maxArr.push(max);
        }

		// option
		var option = {
			tooltip: {
			    trigger: 'axis',
			    axisPointer: {
			        type: 'shadow'
			    },
			    formatter:'{b}<br />{a}:{c}吨'
			},
			grid: {
				left: '2%',
				right: '3%',
				top: '5%',
				bottom: '5%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				data: monthArr,
				axisLine: {
					lineStyle: {
						color: '#416dda'
					}
				},
				axisLabel: {
					color: "#fff",
					interval: 0,
					formatter: function formatter(params) {
						//换行显示
						var newParamsName = ""; // 最终拼接成的字符串
						var paramsNameNumber = params.length; // 实际标签的个数
						var provideNumber = 5; // 每行能显示的字的个数
						var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
						/**
	      * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
	      */
						// 条件等同于rowNumber>1
						if (paramsNameNumber > provideNumber) {
							/** 循环每一行,p表示行 */
							for (var p = 0; p < rowNumber; p++) {
								var tempStr = ""; // 表示每一次截取的字符串
								var start = p * provideNumber; // 开始截取的位置
								var end = start + provideNumber; // 结束截取的位置
								// 此处特殊处理最后一行的索引值
								if (p == rowNumber - 1) {
									// 最后一次不换行
									tempStr = params.substring(start, paramsNameNumber);
								} else {
									// 每一次拼接字符串并换行
									tempStr = params.substring(start, end) + "\n";
								}
								newParamsName += tempStr; // 最终拼成的字符串
							}
						} else {
							// 将旧标签的值赋给新标签
							newParamsName = params;
						}
						//将最终的字符串返回
						return newParamsName;
					}
				}
			},
			yAxis: {
				type: 'value',
				splitNumber: 3,
				splitLine: {
					show: true,
					lineStyle: {
						color: '#233c6c',
						type: 'dotted'
					}
				},
				axisLabel: {
					color: "#fff",
					interval: 0
				},
				axisLine: {
					lineStyle: {
						color: '#416dda'
					}
				},
				axisTick: {
					length: 10
				}
			},
			series: [{
				name: '回收量',
				type: 'bar',
				barWidth: 15,
				itemStyle: {
					normal: {
						barBorderRadius: 7,
						color: function color(params) {
							var colorList = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#57fcfe' }, { offset: 1, color: '#35abe9' }]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#34a4f8' }, { offset: 1, color: '#9e86f9' }]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#57fcfe' }, { offset: 1, color: '#35abe9' }]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#34a4f8' }, { offset: 1, color: '#9e86f9' }]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#57fcfe' }, { offset: 1, color: '#35abe9' }]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#34a4f8' }, { offset: 1, color: '#9e86f9' }])];
							return colorList[params.dataIndex];
						}
					}
				},
				data: _data //数据
			}, {
				name: 'dotted',
				type: 'bar',
				itemStyle: {
					normal: {
						barBorderRadius: 7,
						color: '#0f375f'
					}
				},
				silent: true, //是否不响应鼠标事件
				barWidth: 15,
				barGap: '-100%', //使两条bar重叠
				z: -10, //控制先后顺序
				data: maxArr
			}]
		};
		peopleChart.setOption(option);
		peopleChart.resize();
	}

	render(){
		return(
			<div className="main-home">
				<Top />
				<Nav />
				<div className="main-container">
					<div className="clearfix top-box">
						<div className="pull-left day-container">
							<h3>
								<img src={require('../../assets/img/icon_close_nav.png')} onClick={this.handelClick.bind(this)} />
								<span>展开导航</span>
							</h3>
							<div className="process">
								<Link to="/flow">业务流程 →</Link>
							</div>
							<div className="day">
								<h2 className="title2">单日回收量(Top5)</h2>
								<ul className="pinlei">
									{
										this.state.todayRecycleDataList.length > 0
										? this.state.todayRecycleDataList.map((item,index)=>{
											return <li key={index}>{item.recycleTypeName}：{item.countWeight/1000000} 吨</li>
										})
										:<li>暂无数据</li>
									}
								</ul>
							</div>
						</div>
						<div className="pull-left map-container" style={{height:'100%'}}>
							<div id="map" className="" style={{height:'100%'}}>

							</div>
							<div id="smallMap" className="hide" style={{height:'100%'}}>
								
							</div>
							<div id="routeMap" className="hide" style={{height:'100%'}}>

							</div>
							<div id="housePackageMap" className="hide" style={{height:'100%'}}>

							</div>
							<div className="return" id="return" onClick={this.mapReturn.bind(this)}>返回</div>
						</div>
						<div className="pull-right total-container">
							<div className="filter-box">
								<div className={this.state.checkedFlag?'checked':'checkbox'} onClick={this.routerCheck.bind(this)}>
									显示航线图
								</div>
								<div className="pull-right c-select">
									<Select placeholder={this.state.options[0].label} value={this.state.value} onChange={this.selectSubstation.bind(this)}>
								      {
								        this.state.options.map(el => {
								          return <Select.Option key={el.value} label={el.label} value={el.value} />
								        })
								      }
								    </Select>
								</div>
							</div>
							<div className="left-up shadow">
								<h2 className="title"><img src={require('../../assets/img/ico-1.png')} alt="" />总体情况</h2>
								<ul>
									<li>
										<div className="name">
											<h2>累计分拣中心数量</h2>
										</div>
										<div className="num">
											<h3>
												{
													this.formatNum(this.state.packageStationCounts).map((item,index)=>{
														return <span key={index}>{item}</span>
													})
												}
											</h3>
										</div>
										<div className="unit">
											<p>个</p>
										</div>
									</li>
									<li>
										<div className="name">
											<h2>累计销售额</h2>
										</div>
										<div className="num">
											<h3>
												{
													this.formatNum((this.state.cashCount/1000000).toFixed(4)).map((item,index)=>{
														return <span key={index}>{item}</span>
													})
												}
											</h3>
										</div>
										<div className="unit">
											<p>万</p>
										</div>
									</li>
									<li>
										<div className="name">
											<h2>累计回收量</h2>
										</div>
										<div className="num">
											<h3>
												{
													this.formatNum((this.state.weightCount/1000000).toFixed(4)).map((item,index)=>{
														return <span key={index}>{item}</span>
													})
												}
											</h3>
										</div>
										<div className="unit">
											<p>吨</p>
										</div>
									</li>
									<li>
										<div className="name">
											<h2>累计回收次数</h2>
										</div>
										<div className="num">
											<h3>
												{
													this.formatNum((this.state.recycleTimesCount/10000).toFixed(4)).map((item,index)=>{
														return <span key={index}>{item}</span>
													})
												}
											</h3>
										</div>
										<div className="unit">
											<p>万条</p>
										</div>
									</li>
								</ul>
								<i className="bd-r"></i>
							</div>
						</div>
					</div>
					<div className="bottom-box">
						<div className="resource-container">
							<h2 className="title"><img src={require('../../assets/img/ico-5.png')} alt="" />各类再生资源回收量占比（历史累计值）</h2>
							<div id="recycleBoxChartContainer" className="echart-box"></div>
						</div>
						<div className="money-container">
							<h2 className="title"><img src={require('../../assets/img/ico-4.png')} alt="" />回收金额趋势图（月）</h2>
							<div id="recycleMoneyChartContainer" className="echart-box"></div>
						</div>
						<div className="weight-container">
							<h2 className="title"><img src={require('../../assets/img/ico-2.png')} alt="" />回收量趋势图（月）</h2>
							<div id="recycleWeightChartContainer" className="echart-box"></div>
						</div>
					</div>
				</div>
			</div>
		);
	}
}

export default Home;